<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">头像信息</div>
        </template>
        <div class="text item">
          <div class="avatar">
            <el-avatar class="avatar" shape="square" :size="50"  :src="avatar==='http://localhost:8080/' ?  '/public/images/avatar-default.png' :avatar" />
          </div>
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            :limit="1"
            :http-request="uploadavatar"
            :auto-upload="false"
            :on-change="handleChange"
            >
            <template #trigger>
              <p><el-button type="primary">选择头像</el-button></p>
            </template>
            <div>
              <el-button type="success" @click="submitUpload">上传头像</el-button>
            </div>
            <template #tip>
              <div class="el-upload__tip"><p>限制上传1个文件，且旧文件会被新文件覆盖</p></div>
            </template>
          </el-upload>
        </div>
      </el-card>
    </el-col>
    <User_passWord/>
  </el-row>
  
</template>

<script setup>
import {  onMounted, ref,watch } from 'vue';
import User_passWord from './User_passWord.vue';
import { useAvatarStore } from '../store/avatar';
import notification from '../utils/notification';
import { uploadAvatar } from '../api/apiByUser';
import { useTokenStore } from '../store/tokenStore';
import { saveAvatarURL } from '../api/apiByUser'
import { useAdminStore } from '../store/adminStore';
import { ElMessage } from 'element-plus'
import { IMG_MAX_SIZE } from '../constants/File.js' // 图片限制大小 （单位是字节）


const uploadRef = ref()
const useAvatar = useAvatarStore();
console.log(useAvatar)
const avatarURL = ref();
const avatar = ref(useAvatar.Avatar);
const tree =ref()
const file = ref()
const useAdmin = useAdminStore()
const adminName = useAdmin.admin
console.log(adminName)

watch(() => useAvatar.Avatar, (newAvatar) => {
  avatar.value = newAvatar;
});

const handleChange =(newFew)=>{
  // if (!beforeUpload(newFew.raw)) return
  file.value = newFew.raw
  // console.log(file.value);
}

const uploadavatar = async () => {
  console.log(file.value)
   tree.value = await uploadAvatar(file.value)
   console.log("uploadAvatar"+tree.value);
   await uploadSuccess()
}

// 文件上传前判断
const beforeUpload = (file) => {
  if (file.size > IMG_MAX_SIZE) {
    ElMessage.error('文件太大，请重新上传文件')
    return false
  }
  return true
}

const uploadSuccess = async () => {
  // console.log(avatarURL.value);
    const attitude = await saveAvatarURL(tree.value,adminName)
    
    useAvatar.updateAvatar(tree.value)
    avatarURL.value =  tree.value
  
  uploadRef.value.clearFiles()
}



onMounted(()=>{
  avatarURL.value = useAvatar.Avatar
})

const submitUpload=()=>{
  uploadRef.value.submit();
}




</script>

<style lang="scss" scoped>
.avatar {
  text-align: center;
}
.upload-demo {
  text-align: center;
}
.box-card {
  height: 316px;
}
.change-password-box {
  padding-top: 38px;
}

</style>